<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <script type="text/javascript" src="__XIAOHE__/js/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
     crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="__XIAOHE__/css/bootstrap.min.css" media="screen" />
    <script src="__XIAOHE__/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="__XIAOHE__/css/style.css" />
    <link rel="stylesheet" type="text/css" href="__XIAOHE__/css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="__XIAOHE__/css/animate.css" />
    <link rel="stylesheet" type="text/css" href="__XIAOHE__/css/font-awesome.min.css" />
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <div id="app">

        <div class="form-group " >
            <label class="control-label col-xs-12 col-sm-2">项目主题：</label>
            <select class="form-control " id="cate">
            <?php foreach($cate as $key=>$val){?>
              <option value="{$val.id}">{$val.title}</option>
            <?php }?>
            </select>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">自定义标签:</label>
            <div class="col-xs-12 col-sm-2">
                <van-cell-group>
                    <van-field v-model="value" placeholder="" />
                </van-cell-group>
            </div>
            <div class="col-xs-12 col-sm-2">
                <div id="danxuan" @click="danxuan" class="btn btn-success btn-embossed">
                    单选
                </div>
                <div id="shurukaung" @click="shurukaung" class="btn btn-default btn-embossed">
                    输入框
                </div>
            </div>
        </div>
        <div class="form-group" v-for="(value1,key1) in list">
            <div v-if="value1.type == '1'">
                <label class="control-label col-xs-12 col-sm-2">{{value1.name}}:</label>
                <div class="col-xs-12 col-sm-4">
                    <van-cell-group>
                        <van-field placeholder="" />
                    </van-cell-group>
                </div>
                <div class="col-xs-12 col-sm-1">
                    <div id="danxuan" @click="shanchu(key1)" class="btn btn-danger btn-import">
                        删除
                    </div>
                </div>
            </div>
            <div v-else-if="value1.type == '2'">
                <label class="control-label col-xs-12 col-sm-2">{{value1.name}}:</label>
                <div class="col-xs-12 col-sm-4">
                    <div v-for="(value2,key2) in value1.dxt">
                        <div class="col-xs-12 col-sm-8">
                            <div class="hyyjfk2aa" style="padding: .05rem;">
                                <van-radio-group v-model="value1.radio">
                                    <van-radio :name='key2'><span v-html='value2.name'></span></van-radio>
                                </van-radio-group>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-4">
                            <div id="danxuan" @click="shanchudx(key1,key2)" class="btn btn-danger btn-import">
                                删除单选
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="col-xs-12 col-sm-8">
                            <van-cell-group>
                                <van-field v-model="value1.value" placeholder="" />
                            </van-cell-group>
                        </div>
                        <div class="col-xs-12 col-sm-4">
                            <div id="danxuan" @click="danxuandx(key1)" class="btn btn-success btn-embossed">
                                增加单选
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-1">
                    <div id="danxuan" @click="shanchu(key1)" class="btn btn-danger btn-import">
                        删除
                    </div>
                </div>
            </div>
        </div>
       
        <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
             <div id="danxuan" @click="daying" class="btn btn-success btn-embossed">
            确定
        </div>
            <!-- <button type="submit" id="tijiao" class="btn btn-success btn-embossed disabled">{:__('OK')}</button> -->
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
    </div>


    
</form>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                value: null,
                value2: null,
                list: [
                    // {
                    //  name: '您最喜欢的部分是什么？',
                    //  radio: null,
                    //  input: null,
                    //  type: 2,
                    //  dxt: [{
                    //          name: '团操课'
                    //      },
                    //      {
                    //          name: '私教课'
                    //      },
                    //      {
                    //          name: '有氧区'
                    //      },
                    //      {
                    //          name: '力量区'
                    //      },
                    //      {
                    //          name: '泳池区'
                    //      },
                    //      {
                    //          name: '其他'
                    //      }
                    //  ]
                    // },
                    // {
                    //  name: '您对我们还有什么建议',
                    //  type: 1,
                    // }
                ] //渲染在这里
            }
        },

        methods: {
            shurukaung() {
                var that = this
                var list = that.list
                var value = that.value
                var shurukaung = {
                    name: value,
                    input: null,
                    type: 1
                }
                list.push(shurukaung)
                that.list = list
                that.value = null
            },
            danxuan() {
                var that = this
                var list = that.list
                var value = that.value
                var shurukaung = {
                    name: value,
                    radio: null,
                    type: 2,
                    value: null,
                    dxt: []
                }
                list.push(shurukaung)
                that.list = list
                that.value = null
            },
            shanchu(key) {
                var that = this
                var list = that.list
                list.splice(key, 1)
                that.list = list
            },
            shanchudx(key1, key2) {
                var that = this
                var list = that.list
                list[key1].dxt.splice(key2, 1)
                that.list = list
            },
            danxuandx(key1) {
                var that = this
                var list = that.list
                var value = list[key1].value
                list[key1].dxt.push({
                    name: value
                })
                list[key1].value = null
                that.list = list
            },
            daying() {
                var that = this
                var list = that.list
                console.log(list)
                var cid = $("#cate").val()

                axios.post('/admin/question/add', {
                    list: list,
                    cid:cid
                  })
                  .then(function (response) {
                    console.log(response);
                    if(response.data >0){
                        alert("添加成功:"+response.data)
                        $(location).attr('href', '/admin/question/index');
                    }
                  })

                // axios.post('/admin/question/add', {
                //     list: list
                //   })
                //   .then(function (response) {
                //     console.log(response);
                //   })
            }

        }
    })
</script>

<!-- <script>
    $('#tijiao').click(function(){
        daying();
        alert(2);
    });
</script> -->
